RWD排版試做
選單以下區塊，RWD 會較複雜，留到後面實作。
前置作業：引入 reset
先製作滿版區塊 banner，裡面放入大圖 (寬1400、高500)
<div class="banner">
<img src="https://picsum.photos/1400/500?random=1" alt="img">
</div>
底下 about 區塊，會是固定寬，因為版面會有直排與橫排的狀況，以及主標題、底下幾欄狀況。所以我先建構 about，裡面放兩個東西，一個是主標題的區域，一個是項目的區域。
wrap 裡面第一個是標題區，第二個是內容的欄位區。我們可以利用外層的 wrap 做固定寬，再去 item-group 設定我所有的 item，等於是將標題與內容資料區進行了區隔。每一個 item 中放置一張假圖，有標題、內文。同樣的，在標題去增加標題、內文。
<div class="banner">
<img src="https://picsum.photos/1400/500?random=1" alt="img">
</div>
<div class="about">
<div class="wrap">
<div class="title">
<h2>關於我們</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, cumque animi quasi est sint tempore! Magnam, et. Impedit ut, doloribus?</p>
</div>
<div class="item-group">
<div class="item">
<img src="https://picsum.photos/300/200?random=2" alt="img">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
<div class="item">
<img src="https://picsum.photos/300/200?random=3" alt="img">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
<div class="item">
<img src="https://picsum.photos/300/200?random=4" alt="img">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
</div>
</div>
製作兩欄畫面，可以將上面 about 結構沿用到這邊。因為兩欄，左邊的圖跟右邊的文字搭配在一起，所以建構的方式會有一些落差。每一個 item 內，分成圖片區與文字區。
<div class="service">
<div class="wrap">
<div class="item-group">
<div class="item">
<div class="pic">
</div>
<div class="text">
</div>
</div>
</div>
</div>
</div>
這個結構其實也可以沿用到上面。因為待會要將 pic 與 text 做橫排。
我們將上方的 img 用 div 包起來，結構用與下方完全相同，這樣方便我們之後的檢視與複製。只是在不同區塊的外觀呈現會不同，這也顯示出 html 的彈性。
<body>
<div class="banner">
<img src="https://picsum.photos/1400/500?random=1" alt="img">
</div>
<div class="about">
<div class="wrap">
<div class="title">
<h2>關於我們</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, cumque animi quasi est sint tempore! Magnam, et. Impedit ut, doloribus?</p>
</div>
<div class="item-group">
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=2" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=3" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=4" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="service">
<div class="wrap">
<div class="item-group">
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=5" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
</div>
</div>
</div>
</body>
接著處理底下四欄的畫面，將 about 複製到下面去，再將 item 複製一份。
然後，製作 footer。
現在資料都準備好了，我們開始建構畫面。
代碼目前長相：
<body>
<div class="banner">
<img src="https://picsum.photos/1400/500?random=1" alt="img">
</div>
<div class="about">
<div class="wrap">
<div class="title">
<h2>關於我們</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, cumque animi quasi est sint tempore! Magnam, et. Impedit ut, doloribus?</p>
</div>
<div class="item-group">
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=2" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=3" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=4" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="service">
<div class="wrap">
<div class="item-group">
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=5" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="about">
<div class="wrap">
<div class="title">
<h2>關於我們</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, cumque animi quasi est sint tempore! Magnam, et. Impedit ut, doloribus?</p>
</div>
<div class="item-group">
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=12" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=13" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=14" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=44" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
©:copyright 2021 by 雷
</div>
</body>
首先，所有 item 裡的圖片都要百百的寬
.item .pic img {
width: 100%;
}
item-group 將它設定成 display flex
.item-group {
display: flex;
}
但這個東西是甚麼時候才要出現 flex ?
先製作手機版，將上面的 .item-group 代碼先註解掉。
先設定每個 item 的外邊距
.item {
margin: 0 10px 20px;
}
將文字置中，字體大小調大，設定距離
.title h2 {
font-size: 46px;
text-align: center;
}
.title p {
font-size: 22px;
text-align: center;
}
.title {
margin: 0 10px 20px;
}
目前手機畫面壞掉，原因是 banner 的圖片沒有設定
.banner img {
width: 100%;
}
設定 footer，用 padding 將空間撐開
.footer {
background: #333;
color: #aaa;
text-align: center;
}
設定 item 裡面的 h3，初學者將一層一層寫出來，較容易找它
.item .text h3 {
font-size: 24px;
text-align: center;
}
目前手機版代碼長相：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.banner img {
width: 100%;
}
.item .pic img {
width: 100%;
}
.item {
margin: 0 10px 40px;
}
.title h2 {
font-size: 46px;
text-align: center;
}
.title p {
font-size: 22px;
text-align: center;
}
.title {
margin: 0 0px 20px;
background: #bbb;
padding: 30px 10px;
}
.footer {
background: #333;
color: #aaa;
text-align: center;
}
.item .text h3 {
font-size: 24px;
text-align: center;
}
/*.item-group {
display: flex;
}*/
</style>
</head>
<body>
<div class="banner">
<img src="https://picsum.photos/1400/500?random=1" alt="img">
</div>
<div class="about">
<div class="wrap">
<div class="title">
<h2>關於我們</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, cumque animi quasi est sint tempore! Magnam, et. Impedit ut, doloribus?</p>
</div>
<div class="item-group">
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=2" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=3" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=4" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="service">
<div class="wrap">
<div class="item-group">
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=5" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="about">
<div class="wrap">
<div class="title">
<h2>關於我們</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, cumque animi quasi est sint tempore! Magnam, et. Impedit ut, doloribus?</p>
</div>
<div class="item-group">
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=12" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=13" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=14" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
<div class="item">
<div class="pic">
<img src="https://picsum.photos/300/200?random=44" alt="img">
</div>
<div class="text">
<h3>title</h3>
<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Id sit et, omnis, numquam, blanditiis doloremque ipsa voluptates illum beatae nesciunt dolore possimus sed rem repudiandae optio? Delectus culpa, ab laboriosam dolore, a iste expedita labore officiis soluta maxime eius ipsum obcaecati atque, velit placeat quaerat. Ad consequuntur, doloremque, exercitationem rem repellendus tempore sapiente facere reprehenderit quis totam quos, quas et.</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
©:copyright 2021 by 雷
</div>
</body>
</html>
進入桌機，起手式：媒體查詢。
將所有 item-group 都設定為 flex
@media screen and (min-width: 768px) {
.item-group {
display: flex;
}
}
設定固定寬
.wrap {
width: 100%;
max-width: 1400px;
margin: auto;
}
但這樣設定無法達到滿版的效果
所以改用 .item-group 進行設定
.item-group {
width: 100%;
max-width: 1400px;
margin: auto;
}
接著處理 service 這塊的問題。
先將內容物變成橫排
.service .item {
display: flex;
}
畫面正常會是兩欄
.service .item .pic,
.service .item .text{
width: 50%;
margin: 0;
}
內容與文字會是置中。
.service .item .text {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
box-sizing: border-box;
}
圖片下方會多了一點點白色的空間，這是因為圖片垂直對齊，對齊的會是基線。解決方案是，我去設定圖片對齊方式不要對齊基線。(只要對齊方式不要是 baseline 就可以了)
img {
vertical-align: bottom;
}
若上下的空間，要有背景色彩，用padding。
.service {
background: royalblue;
margin: 60px 0;
}
發現，畫面下方出現一塊色塊，原因是我們設定到共用的東西。是高度、margin、還是 padding 造成這樣的影響 ?
.service .item {
margin: 0 20px;
}
重點回顧
從手機先設定還是桌機先設定
如何設定HTML結構
如何設定CSS
圖片有什麼已知的毛病
圖片要設定什麼
